<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
		<link rel="stylesheet" href="css/neat.css" />
		<style>
			html,body{
				width:100%;
				height:100%;
			}
			.con{
				width:100%;
				height:100%;
			}
			.left-chart{
				float:left;
				width:600px;
				height:100%;
				position:relative;
			}
			.right-chart{
				float:left;
				width:calc(100% - 600px);
				height:100%;
				position:relative;
			}
			.btn{
				position: absolute;
			    padding: 8px 8px;
			    background-color: #61a0a8;
			    color: #fff;
			    top: 5px;
			    right: 5px;
			    z-index: 1;
			    border-radius: 3px;
			    cursor: pointer;
			}
			.map-area,
			.chart-area{
				position: absolute;
				left:0;
				top:0;
			}
			.chart-area2{
				position: absolute;
				left:0;
				top:0;
				visibility: hidden;
			}
			.map-area2{
				width:100%;
				height:100%;
				position:relative;
			}
			.bottom-pic{
				width: 100%;
			    height: auto;
			    position: relative;
			    top: 50%;
			    margin-top: -200px;
			}
			.mangya{
				position: absolute;
			    top: 140px;
			    left: 6px;
			}
			.mangya img{
				width: 194px;
			}
			.lenghu{
				position: absolute;
			    top: 129px;
			    left: 134px;
			}
			.lenghu img{
				width: 136px;
			}
			.dachaidan{
				position: absolute;
			    top: 166px;
    			left: 191px;
			}
			.dachaidan img{
				width: 184px;
			}
			.geermu{
				position: absolute;
			    top: 250px;
    			left: 32px;
			}
			.geermu img{
				width: 331px;
			}
			.delingha{
				position: absolute;
			    top: 164px;
			    left: 348px;
			}
			.delingha img{
				width: 142px;
			}
			.tianjun{
				position: absolute;
			    top: 136px;
			    left: 413px;
			}
			.tianjun img{
				width: 177px;
			}
			.wulan{
				position: absolute;
			    top: 285px;
			    left: 424px;
			}
			.wulan img{
				width: 151px;
			}
			.dulan{
				position: absolute;
			    top: 282px;
			    left: 332px;
			}
			.dulan img{
				width: 228px;
    			height: 173px;
			}
			.area{
				cursor: pointer;
			}
			.area span{
				font-size:12px;
				color:#113658;
			}
			.mangya span{
				position: absolute;
			    z-index: 1;
			    top: 70px;
			    left: 39px;
			}
			.lenghu span{
				position: absolute;
			    z-index: 1;
			    top: 46px;
			    left: 16px;
			}
			.dachaidan span{
				position: absolute;
			    z-index: 1;
			    top: 62px;
			    left: 57px;
			}
			.geermu span{
				position: absolute;
			    z-index: 1;
			    top: 79px;
			    left: 144px;
			}
			.delingha span{
				position: absolute;
			    z-index: 1;
			    top: 98px;
			    left: 54px;
			}
			.tianjun span{
				position: absolute;
			    z-index: 1;
			    top: 85px;
			    left: 92px;
			}
			.wulan span{
				position: absolute;
			    z-index: 1;
			    top: 23px;
			    left: 71px;
			}
			.dulan span{
				position: absolute;
			    z-index: 1;
			    top: 92px;
			    left: 116px;
			}
			.area.selected span{
				font-size: 15px;
			    color: #ff3b00;
			    font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="con clearfix">
			<div class="left-chart">
				<!--<div id="map" class="map-area" style="width:100%;height:100%;"></div>-->
				<div class="map-area2">
					<img src="img/map.png" class="bottom-pic" alt="" style="width:100%;height: auto;"/>
					<div class="area mangya"><img src="img/mangya.png" /><span>茫崖行政委员会</span></div>
					<div class="area lenghu"><img src="img/lenghu.png" /><span>冷湖行政委员会</span></div>
					<div class="area dachaidan"><img src="img/dachaidan.png" /><span>大柴旦行政委员会</span></div>
					<div class="area geermu"><img src="img/geermu.png" /><span>格尔木市</span></div>
					<div class="area delingha"><img src="img/delingha.png" /><span>德令哈市</span></div>
					<div class="area tianjun"><img src="img/tianjun.png" /><span>天峻</span></div>
					<div class="area wulan"><img src="img/wulan.png" /><span>乌兰</span></div>
					<div class="area dulan"><img src="img/dulan.png" /><span>都兰</span></div>
				</div>
			</div>
			<div class="right-chart">
				<button class="btn" id="all">查看全州数据</button>
				<div id="chart" class="chart-area" style="width:100%;height:100%;"></div>
				<div id="dataChart" class="chart-area2" style="width:100%;height:100%;"></div>
			</div>
		</div>
		
		<script src="js/jquery.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/demo.js"></script>
	</body>
</html>
